<template>
    <div class="operate" v-show="state && !isShow">
        <van-button round type="info" color="#F8531B" class="all" @click="selectAll">全选</van-button>
        <van-button round type="info" class="del" @click="selectDel">删除</van-button>
    </div>
</template>

<script>
import {Dialog, Toast} from 'vant';
export default {
    props:{
        state:{
            type:Boolean
        },
        isShow:{
            type:Boolean
        },
        selectList:{
            type:Array
        }
    },
    name:"operate",
    data(){
        return{
            All:false
        }
    },
    methods:{
        selectAll(){
            this.All = !this.All
            this.$emit('selectAll',this.All)
        },
        selectDel(){
            if(this.selectList.length === 0){
                Toast.fail("请选择要删除的文章")
            }else{
                Dialog.confirm({
                    title: '删除草稿',
                    message: '删除后无法恢复',
                    confirmButtonText:"删除",
                    confirmButtonColor:"#F8531B"
                    })
                    .then(() => {
                        this.$emit('selectDel')
                    })
                    .catch(() => {
                        // on cancel
                });
            }
        }
    }
}
</script>

<style scoped>
.operate{
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    background:#F9FAFB;
    display: flex;
    align-items: center;
    justify-content:space-around;
    padding:0.4rem;
}
.operate .all{
    width:3rem;
    height:0.7rem;
}
.operate .del{
    background-color:#FFF2EE;
    width:3rem;
    height:0.7rem;
    color:#F8531B;
    border:0.02rem solid #F8531B;
}
</style>